<template>
    <div class="login_con">
        <h2 class="titleh1">{{$t('reg[18]')}}</h2>
        <section class="frommain">
            <div class="fromcont">
                <el-form label-position="top" label-width="80px" :rules="rules" ref="ruleForm" :model="formLabelAlign">
                    <el-form-item :label="$t('reg[2]')" prop="username">
                        <el-input v-model="formLabelAlign.username" :placeholder="$t('reg[4]')" ></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('reg[3]')" prop="password">
                        <el-input v-model="formLabelAlign.password" :placeholder="$t('reg[5]')" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div class="fromfooter">
                    <router-link to="phonepassword">
                        <p>{{$t('reg[6]')}}</p>
                    </router-link>
                </div>
                <el-button type="primary" size="medium" :loading="singbuttonle" @click="handleSubmit()">{{$t('header.route[12]')}}</el-button>
                <div class="fromcontfooter" v-if="false">
                    {{$t('reg[7]')}}
                    <router-link to="register" >
                    {{$t('reg[8]')}}
                    </router-link>
                </div>
            </div>
        </section>
        <img class="fromimg" v-if="la=='zh'" :src="require('_img/login-zh.png')">
        <img class="fromimg" v-else :src="require('_img/login-en.png')">
    </div>
</template>

<script>
import { login } from '@/api/user'
import { EmailSms, setToken, Passwordencryption } from '@/libs/util'
// import { mapActions } from 'vuex'
// import { setToken } from "@/libs/util";
export default {
    name: 'login',
        data () {
            var validatePass1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('reg[9]')));
                } else if (EmailSms(value)) {
                    if(this.$public.email(value)){
                        callback();
                    }else{
                        callback(new Error(this.$t('reg[10]')));
                    }
                } else {
                    if(this.$public.phone(value)){
                        callback();
                    }else{
                        callback(new Error(this.$t('reg[11]')));
                    }
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (this.$public.pwds(value)) {
                    callback();
                } else {
                    callback(new Error(this.$t('reg[13]')));
                }
            };
            return {
                formLabelAlign: {
                    username: '',
                    password: '',
                    google_code: '',
                    secret: ''
                },
                la: 'zh',
                singbuttonle: false,
                rules: {
                    username: [
                        { validator: validatePass1, trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                },
            }
        },
        created(){
            if(localStorage.getItem('lang')){
                this.la = localStorage.getItem('lang')
            }
            if(navigator.userAgent.indexOf("MSIE") > 0) {
                //IE 
                document.onkeydown = (()=> {
                    if(13 == event.keyCode) {　　　　　　　　　　
                        this.handleSubmit();　　　　　　　　　
                    }
                }) 
            } else {
                //非IE 
                window.onkeydown = (()=> {
                    if(13 == event.keyCode) {　　　　　　　　　　
                        this.handleSubmit();　　　　　　　　　
                    }
                })
            }

            
        },
        methods: {
            handleSubmit() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.singbuttonle = true;
                        login(Passwordencryption(this.formLabelAlign)).then(res => {
                            this.singbuttonle = false;
                               if(res.access_token !==0){ //未开启验证
                                    this.$message({
                                        message: this.$t('reg[14]'),
                                        type: 'success'
                                    });
                                     
                                    setToken('token',res.access_token);
                                    // setTimeout(() => {
                                    //     this.$router.push({ path:"/home" });
                                    // }, 800);
                                    location.href = "/";
                                    
                               }else{
                                   this.gooleyanhz();
                                   this.formLabelAlign.secret = res.secret
                               }
                            
                        }).catch(err => {
                            delete this.formLabelAlign.secret;
                            delete this.formLabelAlign.google_code;
                            this.singbuttonle = false
                        });
                    } else {
                        return false;
                    };
                });
            },
            gooleyanhz(){
                this.$prompt( this.$t('reg[15]'),this.$t('reg[16]'), {
                    showCancelButton: false,
                    showInput: true,
                    inputPlaceholder:this.$t('reg[17]'),
                    inputPattern: /\S/,
                    inputErrorMessage: this.$t('reg[18]'),
                }).then(({ value }) => {
                    this.formLabelAlign.google_code = value;
                    this.handleSubmit();
                });
            }
        }
    }
</script>

